<template>
  <div class="register">
    <ReturnBack></ReturnBack>
    <div class="box">
      <span>我们将发送验证码到您的手机</span>
      <van-form @submit="onSubmit">
      <van-field
        v-model="phone"
        left-icon="phone-o"
        placeholder="请输入手机号"
        :rules="[
        { pattern: /^1[3456789]\d{9}$/, message: '请输入正确手机号'}]"
        class="input"/>
      <van-button round block type="info" native-type="submit" style="background-color:red;border:none; border-radius: 0">下一步</van-button>
      </van-form>
      <p style="font-size:.4rem;float: right;margin-top:1.3rem;color:#ccc">已有账号？<span style="color:red;" @click="changeLogin">登录</span></p>
    </div>
  </div>
</template>

<script>
import ReturnBack from '@/components/return.vue'
export default {
  name: 'RegisterVue',
  data () {
    return {
      phone: ''
    }
  },
  components: {
    ReturnBack
  },
  mounted () {
  },
  methods: {
    changeLogin () {
      this.$router.push('/login')
    },
    onSubmit () {
      this.$router.push(`/registerSubmit/${this.phone}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  padding: .8rem;
}
.box span{
  font-size: .4rem;
}
.input{
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: .5rem 0;
}
</style>
